<template>
  <div class="login">
    <div id="app" :style="{backgroundImage: 'url(' + bg + ')'}">
      <vue-particles color="#e6f7ff" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4" linesColor="#e6fffb" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
      </vue-particles>
    </div>
    <div class="outerBox">
      <div class="box">
        <div class="boxLine"></div>
        <div class="userFrom">
          <div class="formTitle">
            <span style="margin-left:100px">注册账号</span>
          </div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" style="margin-top:36px;">
            <el-form-item prop="spaceName" style="margin-left:-100px">
              <el-input v-model="ruleForm.spaceName" placeholder="请输入空间名称" style="width:300px;" class="formIpt"></el-input>
            </el-form-item>
            <el-form-item  prop="psw" style="margin-left:-100px">
              <el-input v-model="ruleForm.psw" style="width:300px;" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item  prop="pswAgain" style="margin-left:-100px">
              <el-input v-model="ruleForm.pswAgain" style="width:300px;" placeholder="请确认密码" type="password"></el-input>
            </el-form-item>
            <el-form-item  prop="phoneNum" style="margin-left:-100px">
              <el-input v-model="ruleForm.phoneNum" placeholder="请输入手机号" style="width:300px;" class="formIpt"></el-input>
            </el-form-item>
            <el-form-item  prop="num" style="margin-left:-100px">
              <div style="display:flex;flex-flow:row;">
                <el-input v-model="ruleForm.num" auto-complete="off" style="width:170px;" placeholder="请输入验证码"></el-input>
                <el-button class="getNum" type="primary" v-if="!show" style="margin-left:15px;width:115px">{{count}} s </el-button>
                <el-button class="getNum" type="primary"  @click="getNum" v-if="show" style="margin-left:15px;width:115px">获取验证码</el-button>
              </div>
            </el-form-item>
            <el-form-item  style="margin-left:-100px;margin-top:-30px">
              <el-button type="primary" class="formBtn"  style="width:150px;" @click="submitForm('ruleForm')">注册</el-button>
              <el-button type="text" style="margin-left:30px" @click="goLogin ()">使用已有账号登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Bg from '@/assets/images/bg.jpg'
export default {
  name: 'login',
  data () {
    // 验证手机号
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    // 验证码
    let checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'))
      }
      let reg = /^[0-9]{6}$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的验证码'))
      } else {
        callback()
      }
    }
    // 空间名称
    let checkSpaceName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入空间名称'))
      } else {
        callback()
      }
    }
    // 密码
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    // 确认密码
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.psw) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      countdown: '60',
      TIME_COUNT: '60',
      numShow: 0,
      show: true,
      count: '',
      timer: null,
      bg: Bg,
      form: {
        spaceName: '',
        phoneNum: '',
        num: '',
        psw: '',
        pswAgain: ''
      },
      ruleForm: {
        phoneNum: '',
        spaceName: '',
        psw: '',
        pswAgain: '',
        num: ''
      },
      rules: {
        spaceName: [{
          validator: checkSpaceName, trigger: 'blur'
        }],
        phoneNum: [
          { validator: checkPhone, trigger: 'blur' }
        ],
        num: [
          { validator: checkNum, trigger: 'blur' }
        ],
        psw: [
          { validator: validatePass, trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度必须大于6位小于16位', trigger: 'blur' }
        ],
        pswAgain: [
          { validator: validatePass2, trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度必须大于6位小于16位', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  created () {
    //
  },
  methods: {
    // 前往登录
    goLogin () {
      this.$router.push('./login')
    },
    // 注册
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/sysUser/register', {
            mobile: this.ruleForm.phoneNum,
            password: this.ruleForm.psw,
            spaceName: this.ruleForm.spaceName,
            verCode: this.ruleForm.num,
            confirmPassword: this.ruleForm.pswAgain
          }).then((response) => {
            let res = response.data
            if (res.code === '00000000') {
              this.$message({
                message: '注册成功',
                type: 'success',
                onClose: () => {
                  this.$router.push({ name: 'login' })
                }
              })
            } else {
              this.$message.error(res.message)
            }
            console.log(res)
          }).catch((err) => {
            console.log(err.message)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 验证码倒计时
    getNum () {
      // 验证手机号
      if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.ruleForm.phoneNum))) {
        this.$message.error('请输入正确的手机号')
        return false
      } else {
        this.$axios.post('/api/sysUser/sendRegisterVerCode', { mobile: this.ruleForm.phoneNum }).then((response) => {
          let res1 = response.data
          if (res1.code === '00000000') {
            if (!this.timer) {
              this.count = this.TIME_COUNT
              this.show = false
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= this.TIME_COUNT) {
                  this.count--
                } else {
                  this.show = true
                  clearInterval(this.timer)
                  this.timer = null
                }
              }, 1000)
            }
          } else {
            this.$message.error(res1.message)
          }
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/variable'
#app
  width 100vw
  height 100vh
  position absolute
  left 0
  top 0
  z-index 1
  // background-repeat no-repeat
  background-size cover
.login, .outerBox
  // width 100vw
  // height 100vh
  // position absolute
  // left 0px
  // top 0px
  // z-index 0
.box
  width 380px
  height 493px
  background $bg-normal
  opacity 0.9
  // margin 200px auto
  overflow hidden
  display flex
  flex-flow row
  margin-bottom 0
  position absolute
  left calc(50% - 200px)
  top calc(40% - 247px)
  // z-index 0
  z-index 99
  border-radius 5px
  .boxLine
    width 1px
    height 397px
    background $color-border
    margin 36px 27px 0 0
  .userFrom
    width 354px
    height 397px
    margin-top 15px
    .formTitle
      color $color-text
      font-family microsoft yahei
      font-size 32px
      margin 23px 0 21px 0
    .formFuTitle
      color rgba(0, 0, 0, 0.45)
      font-family microsoft yahei
      font-size 14px
      margin 20px 0 51px 0
    .formIpt
      width 330px
      height 40px
    .formBtn
      width 330px
      height 40px
      border-radius 4px
      margin-top 28px
      z-index 99
      font-size $font-size-big
    .remember
      font-size $font-size-normal
      font-family microsoft yahei
      color $color-text
    .formTips
      float right
      font-size $font-size-normal
      font-family microsoft yahei
      color $color-theme
      cursor pointer
      margin-right 25px
</style>
